<template>
	<view class="vipSuccess">
		<view class="steps">
			<view class="step">
				<view class="count ">
					<image class="success-icon"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240205/20240205200846252765.png" mode="">
					</image>
				</view>
				<view class="name">成功加入会员</view>

			</view>
			<view class="step">
				<view class="count count2">
					<view class="current">2</view>
				</view>
				<view class="name2">绑定专属客服，激活会员权益</view>
				<view class="tip">提前锁定霸王餐名额，随时掌握审核进度！</view>
				<image class="img"
					src="https://video.file.zhuochengyun.com/bwc/uploads/20240205/20240205200441771326.png"></image>
				<view class="img-tip-color">长安上方图片，激活会员权益</view>
				<view class="img-tip">如二维码失效，可联系客服：057122931820</view>
			</view>
			<view class="step">
				<view class="count count3">
					<view class="fail">3</view>
				</view>
				<view class="name">去点霸王餐</view>
				<view class="btn" @click="navTo('/pages/index/newIndex','switchTab')">前往抢单</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			aa(){
					uni.navigateToMiniProgram({
							appId: 'wxde8ac0a21135c07d',
							path: 'index/pages/h5/h5?f_token=0&weburl=https%3A%2F%2Fclick.meituan.com%2Ft%3Ft%3D1%26c%3D2%26p%3DOVbwTL5znsiV&f_openId=0&noshare=1&f_userId=0',
							envVersion: "release",
							success: res => {
								// 打开成功
								console.log("打开成功", res);
							},
							fail: err => {
								console.log(err);
							}
						})
			},
			navTo(url, type) {
				if (type === 'switchTab') {
					uni.switchTab({
						url
					})
				}
			}
		}

	}
</script>

<style scoped lang="scss">
	.vipSuccess {
		width: 100vw;
		height: 100vh;
		background-color: #f4f4f4;
		overflow-y: auto;

		.steps {
			width: 710rpx;
			border-radius: 20rpx;
			margin: 20rpx;
			background-color: #fff;
			padding: 30rpx 30rpx 50rpx;
			box-sizing: border-box;

			.step {
				position: relative;
				padding-left: 70rpx;
				padding-top: 5rpx;

				&::after {
					width: 2rpx;
					height: calc(100% - 60rpx);
					background-color: #f4f4f4;
					position: absolute;
					left: 30rpx;
					top: 50rpx;
					transform: translateX(-50%);
					content: '';
				}

				.count {
					width: 60rpx;
					display: flex;
					justify-content: center;
					position: absolute;
					left: 0;
					top: 0;

					.success-icon {
						width: 40rpx;
						height: 40rpx;

					}

					.current {}

					.fail {}

				}

				.count2 {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: #f77a28;
					font-size: 38rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;

				}

				.count3 {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					background-color: #f4f4f4;
					color: #666;
					font-size: 24rpx;
					margin-left: 10rpx;
				}

				.count1 {}

				.name {
					font-size: 28rpx;
					color: #333;
				}

				.name2 {
					font-size: 32rpx;
					color: #333;
				}

				.tip {
					font-size: 24rpx;
					margin-top: 20rpx;
					color: #666;
				}


				.img {
					width: 200rpx;
					height: 200rpx;
					margin-top: 10rpx;
					border: 1rpx solid #ddd;
				}

				.img-tip-color {
					color: #f77a28;
					font-size: 24rpx;
					margin-top: 10rpx;
				}

				.img-tip {
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #666;
				}

				.btn {
					display: inline-block;
					color: #f77a28;
					border: 1rpx solid #f77a28;
					font-size: 20rpx;
					padding: 10rpx 20rpx;
					border-radius: 40rpx;
					margin-top: 20rpx;
				}
			}

			.step:first-child {
				padding-bottom: 100rpx;

				&::after {
					background-color: #f77a28;

				}
			}

			.step:nth-child(2) {
				padding-bottom: 50rpx;

				&::after {
					height: calc(100% - 80rpx);
					top: 70rpx;
				}
			}

			.step:nth-child(3) {
				padding-bottom: 50rpx;

				&::after {
					display: none;
				}
			}
		}
	}
</style>